<template>
  <div>
    <el-card class="box-card">
      <el-row style="height: 50px" :gutter="10">
        <el-col :span="7">
          <span>用户ID:<el-input placeholder="请输入ID查找" @change="findById" class="input" v-model="find1" size="mini"/></span>
        </el-col>
        <el-col :span="7">
          用户名称:<el-input placeholder="请输入用户名称查找" @change="findByUsername" v-model="find2" class="input" size="mini"/>
        </el-col>
        <el-col :span="7">
          用户类型:
          <el-select v-model="find3" placeholder="选择用户类型">
          <el-option label="管理员" value="1"></el-option>
          <el-option label="服务台员" value="2"></el-option>
          <el-option label="药剂师" value="3"></el-option>
        </el-select>
        </el-col>
        <el-col :span="3">
          <el-button size="mini" @click="add" type="primary">新增</el-button>
        </el-col>
      </el-row>
      <el-table
              :data="tableData"
              border
              style="width: 100%">
        <el-table-column
                prop="id"
                label="id"
                width="150">
        </el-table-column>
        <el-table-column
                prop="username"
                label="用户名"
                width="120">
        </el-table-column>
        <el-table-column
                prop="realName"
                label="姓名"
                width="120">
        </el-table-column>
        <el-table-column
                label="性别"
                prop="sex">
          <template slot-scope="scope">
            {{scope.row.sex==='1'?'男':'女'}}
          </template>
        </el-table-column>
        <el-table-column
                label="用户类型"
                prop="role">
          <template slot-scope="scope">
            {{scope.row.role==='1'?'管理员':''}}
            {{scope.row.role==='2'?'服务台员':''}}
            {{scope.row.role==='3'?'药剂师':''}}
          </template>
        </el-table-column>
        <el-table-column
                prop="tel"
                label="联系电话"
                width="300">
        </el-table-column>
        <el-table-column
                prop="age"
                label="年龄"
                width="120">
        </el-table-column>
        <el-table-column
                prop="address"
                label="住址"
                width="120">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="200">
          <template slot-scope="scope">
            <el-button @click="edit(scope.row)"  type="success" size="small">编辑</el-button>
            <el-button @click="del(scope.row)" type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-col offset="6">
          <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage4"
                  :page-sizes="[5, 10, 15, 20]"
                  :page-size="page.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="page.total">
          </el-pagination>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
  import { del, findAll, findById, findByUsername } from '../../network/user'
  export default {
    name: 'User',
    created() {
      this.findAll()
    },
    methods: {
      add() {
        console.log("添加用户")
        this.$router.push("userAdd")
      },
      edit(row) {
        window.sessionStorage.setItem("id", row.id)
        this.$router.push("userEdit")
      },
      del(row) {
        console.log(row);
        del(row.id).then(res => {
          this.findAll()
        })
      },
      handleSizeChange(val) {
        this.page.pageSize = val
        this.findAll()
      },
      handleCurrentChange(val) {
        this.page.pageNo = val
        this.findAll()
      },
      findAll() {
        findAll(this.page).then(res => {
          console.log(res.data.data)
          this.currentPage4 = res.data.data.current
          this.tableData = res.data.data.records
          this.page.pageNo = res.data.data.current
          this.page.pageSize = res.data.data.size
          this.page.total = res.data.data.total
        })
      },
      findById() {
        findById(this.find1).then(res => {
          console.log(res.data)
          let list = []
          list.push(res.data.data)
          this.tableData = list
        })
      },
      findByUsername() {
        findByUsername(this.find2).then(res => {
          console.log(res.data.data)
          this.tableData = res.data.data
        })
      }
    },

    data() {
      return {
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 3,
        tableData: [],
        page: {
          pageNo: 1,
          pageSize: 5,
          total: ''
        },
        find1: '',
        find2: '',
        find3: '',
      }
    }
  }
</script>

<style scoped>
  .input {
    width: 200px;
  }
</style>
